<template>
    <div>
       <h1>vlue 指令</h1>  
       <p v-for="(item,indx) in objArr":key="item.id">
        {{ indx }} {{ item.name }}  {{ item.id }}
       </p>
       <table class="table " >
        <tbody>
            <tr>
                <td>编号</td>
                <td>姓名</td>
            </tr>
            <tr v-for="item in objArr":key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
            </tr>
        </tbody>
        <select>
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in citys" :key="item.id">{{ item.name }}</option>
        </select>
       </table>
       <table  class="table table-bordered">
        <tbody>
         <tr class="bg-success">
            <th>酒店名称</th>
            <th>电话号</th>
            <th>照片</th>
            <th>房间号</th>
            <th>类型名称</th>
            <th>创建时间</th>
            <th>操作</th>
         </tr>

         <tr v-for="item in data" :key="item.id">
            <td>{{ item.shopname }}</td>
            <td>{{ item.phone}}</td>
            <td><img :src="item.photo" width="100" height="70"/></td>
            <td>{{ item.address }}</td>
            <td>{{ item.TeSeName}}</td>
            <td>{{ moment(item.createtime).format("YYYY-MM-DD") }}</td>
            <td>
                <input type="button" value="删除" class="btn btn-danger"  @click="">
                <input type="button" value="修改" class="btn btn-success"  @click="">
            </td>
         </tr>
        </tbody>
       </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import moment from 'moment'
let objArr:any=ref([
    {id:1,name:"木吒"},
    {id:2,name:"金吒"},
    {id:3,name:"哪吒"}
])
let data:any=ref([
    {id:1,shopname:"北京如家酒店",phone:"18888888888",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平202",TeSeName:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
    {id:2,shopname:"北京汉庭酒店",phone:"18899988888",photo:"https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",address:"北京昌平201",TeSeName:"豪华婚宴",createtime:"2024-1-20T11:32:09.244927"},
    {id:3,shopname:"北京花儿顿酒店",phone:"188777888866",photo:"https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",address:"北京昌平208",TeSeName:"豪华婚宴",createtime:"2021-12-20T11:32:09.244927"},
    {id:4,shopname:"北京如家酒店2",phone:"18888888888",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平202",TeSeName:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
    {id:5,shopname:"北京如家酒店3",phone:"18888888888",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平202",TeSeName:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"},
    {id:6,shopname:"北京如家酒店4",phone:"18888888888",photo:"https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",address:"北京昌平202",TeSeName:"豪华婚宴",createtime:"2022-09-20T11:32:09.244927"}
])
let citys:any=ref([
    {id:1,name:"北京"},
    {id:2,name:"天津"},
    {id:3,name:"上海"},
    {id:4,name:"河北"},
    {id:5,name:"山西"},
    {id:6,name:"山东"},
])
// const fn4=()=>{
//     // $.get({

//     // })
// }
</script>

<style scoped>

</style>